<!--添加课程-->
<template>
  <article ref="dialogWrap" class="dialog-wrap" v-if="isShow">
    <div class="head-wrap">
      <div class="header">
        <div @click="back()" class="back"><span class="arrow"></span></div>
        <div class="title">{{headTitle}}</div>
        <div class="btn">
          <div class="inner">
            <slot name="btn"></slot>
          </div>
        </div>
      </div>
    </div>
    <section class="frame-content-sub no-bg">
      <section class="inner-content pdv-9 pdh-4">

        <div class="input-column-wrap">
          <div class="name">培训班名称：</div>
          <input readonly class="noborder" type="text" v-model="classForm.className">
        </div>
        <div @click="showTimePicker" class="input-column-wrap">
          <div class="name">开始时间：</div>
          <input readonly type="text" v-model="startTime">
        </div>
        <div @click="showEndTimePicker" class="input-column-wrap">
          <div class="name">结束时间：</div>
          <input readonly type="text" v-model="endTime">
        </div>
        <div class="input-column-wrap">
          <div class="name">学时：</div>
          <div @click="" class="input-wrap">
            <input readonly type="text" v-model="classForm.classHour">
          </div>
        </div>


        <div class="input-column-wrap">
          <div class="name">讲师：</div>
          <input @click="selectTeacher" readonly placeholder="请选择讲师" type="text" v-model="classForm.lecturerName">
        </div>


        <div class="input-column-wrap">
          <div class="name">课程模块：</div>
          <input type="text" v-model="classForm.modular">
        </div>
        <div class="input-column-wrap">
          <div class="name">课程名称：</div>
          <input type="text" v-model="classForm.name">
        </div>


        <div class="pdv-3"></div>
        <div @click="save()" class="default-block-btn">提交</div>

        <div class="pdv-3"></div>

      </section>
    </section>
  </article>
</template>

<script>
  import moment from 'moment'
  import _ from 'lodash'
  let currYear = new Date().getFullYear()
  const dateSegmentData = [
    {
      is: 'cube-date-picker',
      title: '开始时间',
      min: new Date(),
      max: new Date(2030, 11, 31)
    },
    {
      is: 'cube-date-picker',
      title: '结束时间',
      min: new Date(),
      max: new Date(2030, 11, 31)
    }
  ]
  export default {
    name: 'addCourse',
    data () {
      return {
        headTitle: '添加课程表',
        selectedClass: {},
        selectedPerson: {},
        selectClassInstance: null,
        selectPersonInstance: null,
        selectTeacherInstance: null,
        isShow: !false,
        startTime: '',
        endTime: '',
        form: {
          startTime: '',
          endTime: '',
          type: '0',
          "days": '',
          "deptid": "",
          "deptname": "",
          "jsje": '',
          "number": '',
          "numberofperiods": [],
          "place": "",
          "sfzc": "0",
          "state": "1",
          "teachersmoney": '',
          "time": "",
          "trainees": "",
          "trainingclass": "",
          "trainingcontent": "",
          "trainmoney": ''
        },
        classForm: {
          classHour: '',
          className: "",
          beginData: "",
          endData: "",
          institutionsId: "",
          lecturerId: "",
          lecturerName: "",
          modular: "",
          name: "",
          state: 0
        },
        dateSegmentPicker: null,
        datePicker: null,
        endDatePicker: null
      }
    },
    mounted () {
      this.classForm.className = this.$store.state.trainingPlanDetail.className
      if (this.$route.query.id) {
        this.form = this.$store.state.trainingPlanDetail
      }
      this.dateSegmentPicker = this.$createSegmentPicker({
        data: dateSegmentData,
        onSelect: (selectedDates, selectedVals, selectedTexts) => {
          this.time = this.tools.formateYearSecond(selectedTexts[0]) + ' - ' + this.tools.formateYearSecond(selectedTexts[1])
        },
        onNext: (i, selectedDate, selectedValue, selectedText) => {
          dateSegmentData[1].min = selectedDate
          if (i === 0) {
            this.dateSegmentPicker.$updateProps({
              data: dateSegmentData
            })
          }
        }
      })
    },
    methods: {
      show () {
        this.isShow = true
      },
      back () {
        this.isShow = false
      },
      save () {
        this.classForm.beginData = this.startTime
        this.classForm.endData = this.endTime
        this.$emit('onSelect', this.classForm)
        this.back()
      },
      /*选择讲师*/
      selectTeacher () {
        if (this.selectTeacherInstance) {
          this.selectTeacherInstance.show()
        } else {
          this.selectTeacherInstance = this.$createSelectTeacher({
            $events: {
              onSelect: data => {
                console.log('onSelect', data)
                this.classForm.lecturerId = data.userId
                this.classForm.lecturerName = data.fullname
              }
            }
          }).show()
        }
      },
      showDateSegmentPicker () {
        this.dateSegmentPicker.show()
      },
      showTimePicker () {
        if (!this.datePicker) {
          this.datePicker = this.$createTimePicker({
            showNow: false,
            min: new Date(),
            max: new Date(2030, 12, 31),
            value: new Date(),
            onSelect: (selectedTime, selectedText, formatedTime) => {
              this.startTime = moment(selectedTime).format('YYYY-MM-DD hh:mm')
              this.computeClassHour()
            }
          })
        }
        this.datePicker.show()
      },
      showEndTimePicker () {
        this.endDatePicker = this.$createTimePicker({
          showNow: false,
          min: moment(this.startTime).add(10, 'm').valueOf(),
          max: moment(this.startTime).add(1, 'days').valueOf(),
          onSelect: (selectedTime, selectedText, formatedTime) => {
            this.endTime = moment(selectedTime).format('YYYY-MM-DD hh:mm')
            this.computeClassHour()
          }
        })
        this.endDatePicker.show()
      },
      computeClassHour () {
        if (!this.startTime || !this.endTime) {
          return false
        }
        this.classForm.classHour = (new Date(this.endTime).getTime() - new Date(this.startTime).getTime()) / 1000 / 60 / 60
        this.classForm.classHour = parseFloat(this.classForm.classHour).toFixed(2)
      }
    }
  }
</script>

<style scoped>

</style>
